<template>
  <div>
    <div class="shopcart">
        <div class="content" @click="toggleList">
            <div class="content-left">
                <div class="logo-wrapper">
                    <div class="logo" :class="{'highlight':totalCount > 0}">
                        <i class="icon-shopping_cart"></i>
                    </div>
                    <div class="num" v-show="totalCount > 0">{{totalCount}}</div>
                </div>
                <div class="price" :class="{'highlight':totalPrice > 0}">￥{{totalPrice}}元</div>
                <div class="desc">另需配送费￥{{deliveryprice}}元</div>
            </div>
            <div class="content-right" @click.stop="pay" @click.prevent>
                <div class="pay" :class="payClass">
                    {{payDesc}}
                </div>
            </div>
        </div>
        <div class="ball-container">
            <transition-group name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                <div v-for="ball in balls" v-show="ball.show" :key="ball.id" class="ball">
                    <div class="inner inner-hook"></div>
                </div>
            </transition-group>
        </div>
        <transition name="fold">
            <div class="shopcart-list" v-show="listShow">
                <div class="list-header">
                    <h1 class="title">购物车</h1>
                    <span class="empty" @click="empty">清空</span>
                </div>
                <div class="list-content" ref="listcontent">
                    <ul>
                        <li v-for="food in selectfoods" :key="food.id" class="food">
                            <div class="name">{{food.name}}</div>
                            <div class="price"><span class="price-icon">￥</span>{{food.price * food.count}}</div>
                            <div class="cartcontrol-wrapper">
                                <cartcontrol :food="food"></cartcontrol>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </transition>
    </div>
    <transition name="fade">
        <div class="list-mask" @click="hideList" v-show="listShow"></div>
    </transition>
  </div>
</template>

<script>
import cartcontrol from '../cartcontrol/cartcontrol'
import BScroll from 'better-scroll'

export default {
    props: {
        selectfoods: {
            type: Array,
            default() {
                return []
            }
        },
        deliveryprice: {
            type: Number,
            default: 0
        },
        minprice: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            balls: [
                {
                    id: 0,
                    show: false
                },
                {
                    id: 1,
                    show: false
                },
                {
                    id: 2,
                    show: false
                },
                {
                    id: 3,
                    show: false
                },
                {
                    id: 4,
                    show: false
                },
                {
                    id: 5,
                    show: false
                }
            ],
            dropBalls: [],
            // 当可以显示的时候，定义fold为true
            fold: true
        }
    },
    computed: {
        totalPrice() {
            let total = 0
            this.selectfoods.forEach((food) => {
                total += food.price * food.count
            })
            return total
        },
        totalCount() {
            let count = 0
            this.selectfoods.forEach((food) => {
                count += food.count
            })
            return count
        },
        payDesc() {
            if (this.totalPrice === 0) {
                return `￥${this.minprice}元起送`
            } else if (this.totalPrice < this.minprice) {
                let diff = this.minprice - this.totalPrice
                return `还差￥${diff}元起送`
            } else {
                return '去结算'
            }
        },
        payClass() {
            if (this.totalPrice < this.minprice) {
                return 'not-enough'
            } else {
                return 'enough'
            }
        },
        listShow() {
            if (!this.totalCount) {
                this.fold = false
                // this.letFalse(this.fold)
                // this.hideList()
                return false
            }
            let show = this.fold
            if (show) {
                this.$nextTick(() => {
                    if (!this.scroll) {
                        this.scroll = new BScroll(this.$refs.listcontent, {
                            click: true
                        })
                        // this.createScroll(this.scroll, this.$refs.listcontent)
                    } else {
                        this.scroll.refresh()
                    }
                })
            }
            return show
        }
    },
    methods: {
        drop(element) {
            // 传进来的element是那个加号div元素
            for (let i = 0; i < this.balls.length; i++) {
                let ball = this.balls[i]
                if (!ball.show) {
                    ball.show = true
                    ball.el = element
                    this.dropBalls.push(ball)
                    return
                }
            }
        },
        beforeEnter(el) {
            let count = this.balls.length
            while (count--) {
                let ball = this.balls[count]
                if (ball.show) {
                    let rect = ball.el.getBoundingClientRect()
                    let x = rect.left - 32
                    let y = -(window.innerHeight - rect.top - 32)
                    // el是class为ball的div元素
                    el.style.display = 'block'
                    el.style.webkitTransform = `translate3d(0,${y}px,0)`
                    el.style.transform = `translate3d(0,${y}px,0)`
                    // inner是el里边class为inner-hook的第一个元素
                    let inner = el.getElementsByClassName('inner-hook')[0]
                    inner.style.webkitTransform = `translate3d(${x}px,0,0)`
                    inner.style.transform = `translate3d(${x}px,0,0)`
                }
            }
        },
        enter(el) {
            /* eslint-disable no-unused-vars */
            let rf = el.offsetHeight
            // 手动取一下这个offsetHeight，是为了触发浏览器重复，上边的语句是为了防止rf没有使用，eslint会报错
            // vue里边一定要设置这个重复，下边的transform才有用
            this.$nextTick(() => {
                el.style.webkitTransform = 'translate3d(0,0,0)'
                el.style.transform = 'translate3d(0,0,0)'
                let inner = el.getElementsByClassName('inner-hook')[0]
                inner.style.webkitTransform = 'translate3d(0,0,0)'
                inner.style.transform = 'translate3d(0,0,0)'
            })
        },
        afterEnter(el) {
            let ball = this.dropBalls.shift()
            if (ball) {
                ball.show = false
                el.style.display = 'none'
            }
        },
        toggleList() {
            if (!this.totalCount) {
                return
            }
            // 如果用户选中了商品 ，点击之后取反
            this.fold = !this.fold
        },
        hideList() {
            this.fold = false
        },
        empty() {
            this.selectfoods.forEach((food) => {
                food.count = 0
            })
        },
        pay() {
            if (this.totalPrice < this.minprice) {
                return
            }
            window.alert(`支付${this.totalPrice}元`)
        },
        createScroll(scroll, route) {
            scroll = new BScroll(route, {
                click: true
            })
        },
        letFalse(el) {
            el = false
        }
    },
    components: {
        cartcontrol
    }
}
</script>

<style lang='stylus' scoped>
@import '~common/stylus/variable.styl'
    @import '~common/stylus/mixin.styl'

.shopcart
    position: fixed
    left: 0
    bottom: 0
    z-index: 50
    width: 100%
    height: 48px
    .content
        position: relative
        bottom: 0
        left: 0
        display: flex
        font-size: 0
        color: rgba(255,255,255,0.4)
        background-color: rgb(20,29,39)
        z-index: 49
        .content-left
            flex: 1
            .logo-wrapper
                display: inline-block
                vertical-align: top
                position: relative
                top: -10px
                margin: 0 12px
                padding: 6px
                width: 56px
                height: 56px
                box-sizing: border-box
                border-radius: 50%
                background-color: rgb(20,29,39)
                .logo
                    display: flex
                    align-items: center
                    justify-content: center
                    width: 100%
                    height: 100%
                    border-radius: 50%
                    background-color: #2b343c
                    .icon-shopping_cart
                        font-size: 24px
                        color: rgb(128,133,138)
                    &.highlight
                        background-color: rgb(0,160,220)
                        .icon-shopping_cart
                            color: #ffffff
                .num
                    position: absolute
                    top: 0
                    right: 0
                    width: 24px
                    height: 16px
                    line-height: 16px
                    text-align: center
                    font-weight: 700
                    font-size: 9px
                    color: #ffffff
                    background-color: rgb(240,20,20)
                    border-radius: 16px
                    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4)
            .price
                display: inline-block
                vertical-align: top
                margin-top: 12px
                padding-right: 12px
                line-height: 24px
                font-weight: 700
                font-size: 16px
                box-sizing: border-box
                border-right: 1px solid rgba(255,255,255,0.1)
                &.highlight
                    color: #ffffff
            .desc
                display: inline-block
                vertical-align: top
                margin: 12px 0 0 12px
                line-height: 24px
                font-size: 10px
        .content-right
            flex: 0 0 105px
            width: 105px
            .pay
                height: 48px
                line-height: 48px
                text-align: center
                font-weight: 700px
                font-size: 12px
                &.not-enough
                    background-color: rgb(43,51,59)
                &.enough
                    color: #ffffff
                    background-color: #00b43c
    .ball-container
        .ball
            position: fixed
            left: 32px
            bottom: 22px
            z-index: 200
        .drop-enter-active
            transition: all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41)
            .inner
                width: 16px
                height: 16px
                border-radius: 50%
                background-color: rgb(0,160,220)
                transition: all 0.4s linear
    .fold-enter-active,.fold-leave-active
        transition: all 0.5s linear;
        transform: translate3d(0,0,0)
    .fold-enter,.fold-leave-to
        transform: translate3d(0,100%,0)
    .shopcart-list
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        background-color: #fff
        z-index: 48
        .list-header
            display: flex
            justify-content: space-between
            padding: 0 18px
            width: 100%
            height: 40px
            line-height: 40px
            box-sizing: border-box
            background-color: $color-background-ssss
            border-bottom: 1px solid $color-row-line
            .title
                font-size: 14px
                font-weight: 200
                color: $color-background
            .empty
                font-size: 12px
                color: $color-blue
        .list-content
            padding: 0 18px
            max-height: 165px
            overflow: hidden
            box-sizing: border-box
            margin-bottom: 52px
            width: 100%
            .food
                position: relative
                padding: 12px 0
                width: 100%
                height: 48px
                box-sizing: border-box
                border-1px($color-row-line)
                .name
                    line-height: 24px
                    font-size: 14px
                    color: $color-background
                .price
                    position: absolute
                    right: 90px
                    bottom: 12px
                    line-height: 24px
                    font-size: 14px
                    font-weight: 700
                    color: $color-red
                    .price-icon
                        font-size: 10px
                        font-weight: normal
                .cartcontrol-wrapper
                    position: absolute
                    top: 6px
                    right: 0
.fade-enter-active,.fade-leave-active
    transition: all 0.5s linear
    opacity: 1
.fade-enter,.fade-leave-to
    opacity: 0
.list-mask
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: rgba(7, 17, 27, 0.6)
    backdrop-filter: blur(10px)
    z-index: 40
</style>
